<template id="f7-input-list-item-smart-select">
    <f7-list-item :title="title" class="item-input" smart-select :smart-select-params="params">
        <div class="item-placeholder" slot="after-title" v-if="selected == undefined && placeholder != undefined">{{placeholder}}</div>
        <select ref="instince" :name="name" v-model="selected" :validate="required" :required="required" :multiple="multiple">
            <option v-for="item in selectOptions" :value="item[optionValue]" :key="item[optionValue]" :selected="selected==item[optionValue]">{{item[optionKey]}}</option>
            <slot></slot>
        </select>
    </f7-list-item>
</template>
<script>
import _ from "lodash";
export default {
  data: function() {
    return {
      selected: undefined,
      selectOptions: []
    };
  },
  props: {
    options: {
      type: Array,
      default: () => []
    },
    params: {
      type: Object,
      default: undefined
    },
    title: String,
    placeholder: String,
    name: String,
    url: String,
    optionKey: {
      type: String,
      default: "key"
    },
    optionValue: {
      type: String,
      default: "value"
    },
    multiple: {
      type: Boolean,
      default: false
    },
    required: {
      type: Boolean,
      default: true
    },
    value: {
      required: true
    }
  },
  watch: {
    selected: function(val, old) {
      if (val != old) {
        this.$emit("input", val);
        this.$emit(
          "selected",
          val,
          _.find(this.selectOptions, t => {
            return t[this.optionValue] == val;
          })
        );
      }
    },
    url: function(val) {
      this.loadData(val);
    }
  },
  created: async function() {
    if (this.value != undefined) {
      this.selected = this.value;
    }
    await this.loadData();
  },
  updated() {
    this.$nextTick(() => {
      if (this.selected != undefined) {
        let itemAfter = this.$$(this.$refs.instince.parentElement).find(
          "div.item-after"
        );
        if (itemAfter && this.$util.isEmpty(itemAfter.text())) {
          let option = this.$util.find(this.selectOptions, p => {
            return p[this.optionValue] == this.selected;
          });
          if (option && !this.$util.isEmpty(option[this.optionKey])) {
            itemAfter.text(option[this.optionKey]);
          }
          //待处理
          // let option = this.$$(this.$refs.instince).find("option[selected]");
          // if (option && !this.$util.isEmpty(option.text())) {
          //   itemAfter.text(option.text());
          // }
        }
      }
    });
  },
  methods: {
    loadData(rqurl = this.url) {
      return new Promise((re, rj) => {
        if (rqurl) {
          this.$f7.request.getJSON(
            rqurl,
            r => {
              if (r) {
                if (_.isArray(r)) {
                  this.selectOptions = r;
                } else if (_.isArray(r.data)) {
                  this.selectOptions = r.data;
                } else {
                  rj();
                }
              }
              re();
            },
            r => {
              rj();
            }
          );
        } else {
          this.selectOptions = this.options;
          re();
        }
      });
    },
    fillDefault() {
      if (this.selected != undefined) {
        let itemAfter = this.$$(this.$refs.instince.parentElement).find(
          "div.item-after"
        );
        if (itemAfter && this.$util.isEmpty(itemAfter.text())) {
          let option = this.$$(this.$refs.instince).find("option[selected]");
          if (option && !this.$util.isEmpty(option.text())) {
            itemAfter.text(option.text());
          }
        }
      }
    }
  }
};
</script>
<style scoped>
li >>> .smart-select .item-inner .item-input-error-message {
  position: absolute;
  margin-left: 35%;
  margin-top: 15px;
}
li >>> .smart-select .item-inner .item-title {
  width: 35%;
}
li >>> .smart-select .item-inner .item-after {
  width: 62%;
  color: #000;
}
li >>> .smart-select .item-inner .item-placeholder {
  width: 62%;
  color: #7a7a7d;
  position: absolute;
  left: 35%;
}
li.item-input-with-error-message {
  line-height: 2.5;
}
.form-right li >>> .smart-select .item-inner .item-placeholder {
  width: 100%;
  color: #7a7a7d;
  position: absolute;
  left: unset;
  right: 35px;
  text-align: right;
}
.form-right li >>> .item-input-error-message {
  text-align: right;
  width: 100%;
  margin-left: auto;
  right: 15px;
}
.form-right li >>> .item-after {
  text-align: right;
  padding-right: 12px;
}
</style>